<!--我发起--策略详情-->
<template>
  <scroller class="scroller" @rightBtn="rightBtn">
    <div class="wrapper bg1" v-if="followMap">

      <!-- 基础信息 -->
      <div class="info bg2">
        <LImage class="top_texture" :src="Config.img('top_texture.png')"></LImage>
        <div class="row acenter">
          <text class="font32 text1">{{T(followMap.followName)+' '}}</text>
          <div class="all"></div>
          <div class="man main1">
            <text class="font24 text1">{{followMap.followCount+T('人正在跟单')}}</text>
          </div>
        </div>
        
        <div class="tag">
          <div class="tag-size bk1" v-for="(item, index) in followMap.mark" v-bind:key="index">
            <text class="font20 main-t1">{{item}}</text>
          </div>
          <LImage class="edit" :src="Config.img('editor_blue.png')"  @click="editClick"></LImage>
        </div>

        <text class="executeTime font20 text3">{{parseTime(followMap.startTime)+' - '}}({{getExecuteTime(followMap.startTime)}})</text>
      </div>

      <!-- 交易对信息-->
      <div class="exchange">
        <text class="font28 text1">{{exchangeName}}</text>

        <div :class="['short-long', Config.upDownBg(followMap.contract_num, 'short-long-red', 'short-long-green')]" v-if="followMap.isContract != 'spot'">
          <text :class="['font20',Config.upDownFont(followMap.contract_num),]">{{followMap.contract_show }}</text>
        </div>
      </div>

      <!-- 策略表现 -->
      <div class="row">
        <div class="line main1"></div>
        <text class="font28 text1">{{T("策略表现")}}</text>
      </div>
      <div class="strategy bg2" v-if="followMap.isContract == 'spot'">
        <div class="strategy-info bg3">
          <div class="column">
            <text class="font24 text3">{{T('总投入')+'('+followMap.investCoin+')'}}</text>
            <text class="font32 text1">{{math.gfCoin(pair.investCoinnNum, followMap.investCoin)}}</text>
          </div>
          <div class="column aend">
            <text class="font24 text3">{{T('总收益')+'('+followMap.investCoin+')'}}</text>
            <text :class="['font32' , Config.upDownFont(followMap.realEarnings)]">{{math.addJia(math.gfCoin(followMap.realEarnings,followMap.investCoin))+'('+math.addJia(followMap.realEarningsRate)+'%)'}}</text>
          </div>
        </div>

        <div class="strategy-data bg2">

          <div class="column all">
            <text class="font24 text3">{{T('实现盈亏')+'('+followMap.investCoin+')'}}</text>
            <text :class="['font24' ,Config.upDownFont(followMap.earnings)]">{{math.addJia(math.gfCoin(followMap.earnings,followMap.investCoin))}}</text>
            <text :class="['font24' ,Config.upDownFont(followMap.earningsRate)]">{{math.addJia(followMap.earningsRate)+'%'}}</text>
          </div>

          <div class="column all">
            <text class="font24 text3">{{T('浮动盈亏')+'('+followMap.investCoin+')'}}</text>
            <text :class="['font24' ,Config.upDownFont(followMap.floatEarnings)]">{{math.addJia(math.gfCoin(followMap.floatEarnings,followMap.investCoin))}}</text>
            <text :class="['font24' ,Config.upDownFont(followMap.floatEarningsRate)]">{{math.addJia(followMap.floatEarningsRate)+'%'}}</text>
          </div>

          <div class="column aend cell-end">
            <text class="font24 text3">{{T('实现')+'/'+T('总年化')}}</text>
            <text :class="['font24' ,Config.upDownFont(followMap.yearIncome)]">{{followMap.yearIncome+'%'}}</text>
            <text :class="['font24' ,Config.upDownFont(followMap.realYearIncome)]">{{followMap.realYearIncome+'%'}}</text>
          </div>
        </div>
      
        <LImage class="texture3" :src="Config.img('texture3.png')"></LImage>
      </div>
      <div class="strategy bg2" v-else>
        <div class="strategy-info bg3">
          <div class="column">
            <text class="font24 text3">{{T('总投入')+'('+followMap.investCoin+')'}}</text>
            <text class="font32 text1">{{math.gfCoin(pair.investCoinnNum, followMap.investCoin)}}</text>
          </div>
          <div class="column aend">
            <text class="font24 text3">{{T('总收益')+'('+followMap.investCoin+')'}}</text>
            <text :class="['font32' , Config.upDownFont(followMap.realEarnings)]">{{math.addJia(math.gfCoin(followMap.realEarnings,followMap.investCoin))+'('+math.addJia(followMap.realEarningsRate)+'%)'}}</text>
          </div>
        </div>

        <div class="strategy-data bg2">

          <div class="column all">
            <text class="font24 text3">{{T('账户权益')+'('+followMap.investCoin+')'}}</text>
            <text :class="['font24', 'text1']">{{math.gfCoin(followMap.marginBalance, followMap.investCoin)}}</text>
          </div>

          <div class="column all">
            <text class="font24 text3">{{T('持仓盈亏')+'('+followMap.investCoin+')'}}</text>
            <text :class="['font24' ,Config.upDownFont(followMap.floatEarnings)]">{{math.addJia(math.gfCoin(followMap.floatEarnings,followMap.investCoin))}}</text>
          </div>

          <div class="column aend cell-end">
            <text class="font24 text3">{{T('总年化')}}</text>
            <text :class="['font24' ,Config.upDownFont(followMap.realYearIncome)]">{{followMap.realYearIncome+'%'}}</text>
          </div>
        </div>
      
        <LImage class="texture3" :src="Config.img('texture3.png')"></LImage>
      </div>

      <!-- 跟单佣金 -->
      <div class="row">
        <div class="line main1"></div>
        <text class="font28 text1">{{T("跟单佣金")}}</text>
      </div>
      <div class="follw bg2">
        <text class="font24 text3 all">{{T('每日佣金')}}</text>
        <text class="font24 text2">{{math.xiaoShuDelete0(followMap.commission) +'VTN(' + (followMap.isVtnEquity ? T('含提现权益') : T('不含提现权益')) + ')'}}</text>
        <LImage class="texture1" :src="Config.img('texture1.png')"></LImage>
      </div>
      
      <!-- 跟单信息 -->
      <div class="row">
        <div class="line main1"></div>
        <text class="font28 text1">{{T("跟单信息")}}</text>
      </div>
      <div class="follw bg2">
        
        <div class="column all">
          <text class="font24 text3">{{T('跟单投入')+'('+followMap.investCoin+')'}}</text>
          <text class="font24 text2">{{math.xiaoShuDelete0(followMap.totalInvest)}}</text>
        </div>

        <div class="column all">
          <text class="font24 text3">{{T('跟单收益')+'('+followMap.investCoin+')'}}</text>
          <div class="row acenter">
            <text :class="['font24'  ,Config.upDownFont(followMap.totalIncome)]">{{math.addJia(math.gfCoin(followMap.totalIncome,followMap.investCoin))}}</text>
            <text :class="['font20' ,Config.upDownFont(followMap.totalIncome)]">{{'('+math.addJia(followMap.totalIncomeRate)+'%'+')'}}</text>
          </div>
        </div>

        <div class="column aend cell-end">
          <text class="font24 text3">{{T('跟单人数')}}</text>
          <text class="font24 text2">{{followMap.totalCounts}}</text>
        </div>

        <LImage class="texture2" :src="Config.img('texture2.png')"></LImage>
      </div>

      <!-- 跟单记录 -->
      <div class="row" v-if="datas.length">
        <div class="line main1"></div>
        <text class="font28 text1">{{T("跟单记录")}}</text>
      </div>
      <div class="cell bg2" v-for="(item, index) in datas" v-bind:key="index">
        
        <LImage class="texture3" :src="Config.img('texture3.png')"></LImage>

        <div class="row acenter">
            <LImage class="cell-image" :src="item.avatar ? item.avatar : Config.img('view_image_portrait_normal.png')"></LImage>
            <text class="font32 text1">{{item.nickName}}</text>
        </div>

        <div class="cell-data">
          <div class="column all">
            <text class="font24 text3">{{T('跟单投入')+'('+item.investCoin+')'}}</text>
            <text class="font24 text2">{{item.investNum}}</text>
          </div>

          <div class="column all">
            <text class="font24 text3">{{T('跟单收益')+'('+item.investCoin+')'}}</text>
            <div class="row acenter">
              <text :class="['font24' ,Config.upDownFont(item.realEarnings)]">{{math.addJia(math.gfCoin(item.realEarnings,item.investCoin))}}</text>
              <text :class="['font20' ,Config.upDownFont(item.realEarnings)]">{{'('+math.addJia(item.realEarningsRate)+'%'+')'}}</text>
            </div>
          </div>

          <div class="column aend cell-end">
            <text class="font24 text3">{{T('年化收益率')}}</text>
            <text :class="['font24', Config.upDownFont(item.realYearIncome)]">{{item.realYearIncome+'%'}}</text>
          </div>
        </div>
      </div>
    </div>
  </scroller>
</template>

<script>
import Config from "@/_js/config";
import navigator from "@/_js/navigator";
import broadcast from "@/_js/broadcast";
import modal from "@/_js/modal";
import math from "@/_js/math";
import vlink from "@/_js/vlink";

const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https";

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('跟单策略'));

export default {
  
  data() {
    return {
      T:T,
      math:math,
      Config:Config,
      parseTime:parseTime,
      executeId:"",//执行id
      exchangeName:undefined, //交易对名称
      pair:undefined,

      followMap: undefined,
      datas: [],
    };
  },

  mounted() {

    Config.init(()=>{

      this.executeId = navigator.getParam('executeId');
      this.httpCopyOrderStrategyDetail();

    },[Config.OPT_UP_DOWN]);

    
  },

  methods: {


    /*************************************************通信触发*/
    //右按钮触发
    rightBtn() {
      
      vlink.getFollw(this.executeId, (vcode, vtip)=>{

        var xiaoshu = math.getCoin(this.followMap.investCoin);
        var totalIncome = math.xiaoshu(this.followMap.totalIncome, xiaoshu, 2);

        var param = {'nickName':this.followMap.nickName,
                    'followName':this.followMap.followName,
                    'yearRate':this.followMap.realYearIncome,
                    'investCoin':this.followMap.investCoin,
                    'manNum':this.followMap.totalCounts,
                    'totalProfit':totalIncome};

        param = {'param':param, 
                'vcode':vcode,
                'vtip':vtip};
        weexFunction.shareWeex('share/ShareLaunch',param);
      });
    },

    /*************************************************HTTP*/
    //http跟单策略详情
    httpCopyOrderStrategyDetail() {

      modal.showLoad();
      var param = {executeId: this.executeId};
      weexHttp.post("follow/queryFollowStrategyDetail",param,true,(data) => {
          modal.hideLoad();
          if (data.status == 200) {
            data = data.data;

            this.datas = data.followExecuteList;

            this.followMap = data.followMap;

            //交易对信息
            var configMap = this.followMap.config;
            var pair = configMap.tradePairs[0];
            this.pair = pair;
            var str;
            if (this.followMap.executeType == 'FATHER') {
              str = T('多币对')+ this.followMap.childCount;
            } else if (this.followMap.isContract == 'spot') {
              str = pair.counterCoin + '/' + pair.baseCoin;
            } else {
              str = pair.counterCoin + T('永续') + '/' + pair.baseCoin;
            }
            this.exchangeName = pair.exchangeName + '（'+ str +'）';

            var investType = pair.investType + '';
            var leverRate = pair.leverRate + '';
            if(investType =="0"){

              this.followMap.contract_num = 10;
              this.followMap.contract_show = T('做多')+leverRate+'X';
            }else if(investType =="1"){

              this.followMap.contract_num = -10;
              this.followMap.contract_show = T('做空')+leverRate+'X';

            }else if(investType =="2"){

              this.followMap.contract_num = 0;
              this.followMap.contract_show = T('双向')+leverRate+'X';
            }

            //交易所
            this.followMap.exchangeNames = this.followMap.exchangeNames ? this.followMap.exchangeNames : [];

            //标签
            this.followMap.mark = this.followMap.mark ? this.followMap.mark : [];
              
            //累计跟单收益率
            var totalIncomeRate = math.chu(this.followMap.totalIncome, this.followMap.totalInvest, 4, 2);
            totalIncomeRate = math.cheng(totalIncomeRate, '100', 2, 2);
            this.followMap['totalIncomeRate'] = totalIncomeRate;
            
            weexFunction.setRightBtn(T("分享"));
          } else {
            modal.toast(data.msg);
          }
        }
      );
    },

    /********************************** Get方法*/
    //获取执行时间
    getExecuteTime(startTime, endTime){
      endTime = endTime ? endTime : new Date().getTime();
      var disTime= endTime - startTime;
      var day =Math.floor(disTime/86400000);
      var hour=Math.floor(disTime%86400000/3600000);
      var min=Math.floor(disTime%86400000%3600000/60000);
      return day+T('天')+hour+T('时')+min + T('分');
    },

    /********************************** 点击方法*/
    //用户点击
    userClick(userId){
      var param = {'userId':userId};
      navigator.open('', "follw/UFollwManInfo",param);
    },

    //编辑信息点击
    editClick(){
      var param = {'executeId':this.executeId};
      navigator.open('', "follw/MFollwStrategySet",param);

      // 单词订阅信息编辑事件
      broadcast.subscribeOnce("MFollwStrategySet",(data)=>{
        this.followMap.followName = data.followName;
        this.followMap.mark =  data.marks;
        this.$forceUpdate();
      });
    },

    //执行详情
    runInfoClick(){

      var configMap = this.followMap.config;
      var pairs = configMap.pairs;
      if (pairs) {
        
        var param = {'executeId':this.executeId};
        navigator.open('','run/RunInfos',param);
      } else if (this.followMap.isContract == 'spot') {

        var param = {'executeId':this.executeId};
        navigator.open('','run/RunInfo',param);
      } else {
        
        var param = {'executeId':this.executeId};
        navigator.open('','runContract/CRunInfo',param);
      }
    }
  },
};

//时间转换(年月日时分)
function parseTime(timestamp){

  var time = new Date(Number(timestamp));

  var year = time.getFullYear()

  var month = time.getMonth()+1
  month = month < 10 ? "0"+month : month;

  var day = time.getDate();
  day = day < 10 ? "0"+day : day;


  var hour = time.getHours();
  hour = hour < 10 ? "0"+hour : hour;

  var minute = time.getMinutes();
  minute = minute < 10 ? "0"+minute : minute;

  return year+"/"+month+"/"+day + ' ' + hour +":"+ minute;
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>

/***********************************基础*/
.scroller {
  top: 0;
  right: 0;
  left: 0;
  z-index: 9;
}
.wrapper {
  width: 750px;
}
.line{
  width: 6px;
  height: 28px;
  border-radius: 3px;

  margin-left: 20px;
  margin-right: 16px;
  margin-bottom: 20px;
}
.edit{
  width: 32px;
  height: 32px;
  margin-right: 10px;
}
.width710{
  width: 710px;
}
.cell-end{
  width:150px;
}


/*********************************** 策略信息*/
.exchange {
  flex-direction: row;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 40px;
}

.short-long{
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.short-long-green{
  background-color: rgba(0, 173, 136, 0.1);
}
.short-long-red{
  background-color:  rgba(248, 84, 84, 0.1);
}

/*********************************** 基础信息*/
.info{
  width: 750px;
  padding-left: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 45px;
}
.man{
  flex-direction: row;
  align-items: center;
  height: 54px;
  border-top-left-radius: 27px;
  border-bottom-left-radius: 27px;

  padding-left: 30px;
  padding-right:20px;
}
.tag {
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
}
.tag-size{
  height: 34px;
  justify-content: center;
  align-content: center;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  border-width: 2px;

  padding-left: 12px;
  padding-right: 12px;

  margin-right: 12px;
}
.tag-text{
  line-height: 22px;
}

.executeTime{
  margin-top:32px;
}

/*********************************** 策略表现*/
.strategy{
  width: 710px;

  border-top-left-radius: 20px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;

  margin-left: 20px;
  margin-bottom: 45px;
}
.strategy-info{
  flex-direction: row;
  justify-content: space-between;
  width: 710px;

  border-top-left-radius: 20px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 20px;

  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.strategy-data{
  flex-direction: row;
  justify-content: space-between;
  width: 710px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  
  padding: 40px;
}

/*********************************** 跟单信息*/
.follw{
  flex-direction: row;
  justify-content: space-between;
  width: 710px;

  border-radius: 4px;
  padding: 40px;

  margin-left: 20px;
  margin-bottom: 45px;
}


/*********************************** 跟单记录*/
.cell{
  flex-direction: column;
  width: 710px;
  border-radius: 4px;

  padding-top: 40px;
  padding-bottom: 40px;

  margin-left: 20px;
  margin-bottom: 45px;
}
.cell-image{
  width: 64px;
  height: 64px;
  border-radius: 34px;

  margin-left: 40px;
  margin-right: 40px;
}
.cell-data{

  flex-direction: row;
  justify-content: space-between;
  width: 710px;

  padding-left: 40px;
  padding-right: 40px;

  margin-top: 40px;
}

</style>
